<script setup>
import { Search } from '@element-plus/icons-vue'
const search = () => {
  const searchInput = document.getElementById('searchInput').value;

  // 根据搜索框内容执行相应操作，比如请求后端API获取搜索结果
  // 这里只是一个简单的展示示例
  const searchResults = [
    '搜索结果1',
    '搜索结果2',
    '搜索结果3'
  ];

  const searchResultsElement = document.getElementById('searchResults');
  searchResultsElement.innerHTML = '';

  searchResults.forEach(result => {
    const resultElement = document.createElement('p');
    resultElement.textContent = result;
    searchResultsElement.appendChild(resultElement);
  });
};

</script>

<template>
  <div class="common-layout" >
    <el-container>
      <el-header style="width: 100%; height: 140px;">
        <div class="common_top" style="height: 30px; width:100%;background-color:#F5F5F6FF; ">
            <div class="top_m_l " style="line-height: 30px;width: 300px;margin: auto;" >

              <a href="http://localhost:9090/Login" style=" font-size: 12px;color: #000;  text-decoration: none;">
                <el-icon ><User style="width: 14px;padding-top: 10px;"/></el-icon> 登录
              </a>
              <i>|</i>
              <a href="http://localhost:9090/reg" style=" font-size: 12px;color: #000;  text-decoration: none;">
                <el-icon ><Edit style="width:15px; padding-top: 10px; "/></el-icon>
                注册
              </a>
              <a href="#" style=" font-size: 12px;color: #c3c2c4;  text-decoration: none;padding-left: 40px;">
                我的订单
              </a>
            </div>
        </div>

          <div class="common-halfBottom" style="width: 1143px;margin: auto;">
            <div>
          <img style="margin:30px 0px 0px 200px;" src="//r.uzaicdn.com/content/store/images/common/logo.png">

            <div style="float: right;margin:35px 240px 0 0 ;">
            <input type="text"
                   style=" border-radius: 20px; /* 设置搜索框为椭圆形，可以根据需要调整数值 */
                    padding: 10px; /* 设置内边距 */
                    border: 1px solid #e3004f;

                    "
                    id="searchInput"
                   placeholder="请输入搜索关键词; ">

            <el-button style="background-color:#e3004f;" :icon="Search" circle />
            <!--            高级搜索开始-->

            <div id="searchResults"></div>

            </div>
            </div>

        </div>
        <div style="width: 1000px;height: 30px;margin-top: 10px;text-align: center;margin: auto; padding:10px 50px 0px 0px  ">
          <a  href="#"style="color:#ea1a56;font-size: 20px;padding: 0 19px;line-height: 32px;display: inline-block;
    position: relative;text-decoration: none;">首页</a>
          <a href="#"style="color:#ea1a56;font-size: 20px;padding: 0 19px;line-height: 32px;display: inline-block;
    position: relative;text-decoration: none;">出境游</a>
          <a href="#"style="color:#ea1a56;font-size: 20px;padding: 0 19px;line-height: 32px;display: inline-block;
    position: relative;text-decoration: none;">早定优惠</a>
          <a href="#"style="color:#ea1a56;font-size: 20px;padding: 0 19px;line-height: 32px;display: inline-block;
    position: relative;text-decoration: none;">国内游</a>
          <a href="#"style="color:#ea1a56;font-size: 20px;padding: 0 19px;line-height: 32px;display: inline-block;
    position: relative;text-decoration: none;">游轮旅行</a>
          <a href="#"style="color:#ea1a56;font-size: 20px;padding: 0 19px;line-height: 32px;display: inline-block;
    position: relative;text-decoration: none;">私人订制</a>
        </div>
<!--        分割线-->
        <div style="height: 5px;width: 100%;background-color:#e81a56 ; margin-bottom: 0px"/>

      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer >
        <div style="width: 100%;height: 688px">

        <div class="common_footer" style="height:75px; width:100%;background-color:#fdf6f9;">
          <div style="width: 920px; height: 75px;margin: auto;">
          <div style="width:228px;height:75px;float:left;color: #ea1a56;font-size: 19px;line-height: 75px;text-align: center;  ">信息透明</div>
          <div style="width:228px;height:75px;float:left;color: #ea1a56;font-size: 19px;line-height: 75px;text-align: center;  ">履行约定</div>
          <div style="width:228px;height:75px;float:left;color: #ea1a56;font-size: 19px;line-height: 75px;text-align: center;  ">维护权益</div>
          <div style="width:228px;height:75px;float:left;color: #ea1a56;font-size: 19px;line-height: 75px;text-align: center;  ">先行赔付</div>
          </div>
        </div>
          <div style="height: 5px;width: 100%;background-color:#e81a56 ; "/>
        <div style="width: 100%;height: 382px;background-color:#343435;">
          <div style="height: 104px;width: 100%;  ">
          <h5 style="width: 1140px;height: 20px ;font-size: 16px;color: #f2f2f2;margin: auto;padding-top: 20px;padding-left: 25px;text-align: center;">
            合作旅社局
          </h5>
            <div style="height: 104px;width:1140px;margin: auto;margin-top: 10px;padding-left: 200px">
              <img src="../../public/touwei/1.jpg" height="54" width="118" style="margin-left: 15px"/>
              <img src="../../public/touwei/2.jpg" height="54" width="118" style="margin-left: 15px"/>
              <img src="../../public/touwei/3.jpg" height="54" width="119" style="margin-left: 15px"/>
              <img src="../../public/touwei/4.jpg"height="54" width="118" style="margin-left: 15px"/>
              <img src="../../public/touwei/5.jpg"height="54" width="118" style="margin-left: 15px"/>
              <img src="../../public/touwei/6.jpg"height="54" width="118" style="margin-left: 15px"/>
              <img src="../../public/touwei/7.jpg"height="54" width="118" style="margin-left: 15px"/>
            </div>

          </div>
          <div style="width: 1000px;margin: auto">
            <div style="width: 190px;height: 160px ;float: left">
              <h3 style="color: #ccc;font-size: 14px;line-height: 30px;text-align: center;">处境游</h3>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">欧洲</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">亚洲</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">美洲</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">澳洲</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">中东非</a>
            </div>
            <div style="width: 190px;height: 160px;float:left;text-align: center;" >
              <h3 style="color: #ccc;font-size: 14px;line-height: 30px">玩法多</h3>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">世界遗产</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">国家公园</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">基地旅行</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">海上假期</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">说走就走</a>
            </div>
            <div style="width: 190px;height: 160px;float:left" >
              <h3 style="color: #ccc;font-size: 14px;line-height: 30px;text-align: center;">好热门</h3>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">法瑞意</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">澳大利亚</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">日本</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">美国</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">海岛</a>
            </div>
            <div style="width: 190px;height: 160px;float:left" >
              <h3 style="color: #ccc;font-size: 14px;line-height: 30px;text-align: center;">保品质</h3>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">奇迹旅行</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">众信自营</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">企业定制</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">私人定制</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">全球签证</a>
            </div>
            <div style="width: 190px;height: 160px;float:left" >
              <h3 style="color: #ccc;font-size: 14px;line-height: 30px;text-align: center;">享服务</h3>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">营业网点</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">会员活动</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">积分换礼</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">您的悠哉</a>
              <a href="#" style="padding-top: 8px;font-size: 12px; text-align: center;color: #999;display: block;
line-height: 18px;text-decoration: none;">活动集锦</a>
            </div>





          </div>
            </div>


        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>

</style>
